<template>
    <el-dialog v-model="dialogVisible" :title="!queryId ? '新增' : '编辑'" width="50%">
        <XklForm :form="addForm">
            <template #menuIds>
                <xkl-tree-select ref="menuTreeSelect" v-model="addForm.menuIds" :config="treeConfig" v-bind="element"
                    @check="treeCheck"></xkl-tree-select>
            </template>
        </XklForm>
        <template #footer>
            <el-button @click="close()">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { Role } from '@/entity/system/role';
import { BaseController } from '@xuekl/cli-base'
import RoleService from '@/service/system/role';
import MenuService from '@/service/system/menu'
import { Options } from 'vue-class-component'

@Options({
})
export default class DialogOperate extends BaseController {
    private roleService = new RoleService()
    private menuService = new MenuService()

    queryId?: string = ''
    dialogVisible = false

    halfKeys: number[] = []
    checkKeys: number[] = []

    addForm: Role = new Role({
        span: 24,
        labelWidth: 120
    })

    treeConfig = {
        url: '/system/menu/treeselect',
        valueTarget: 'id',
        labelTarget: 'label'
    }

    element = {
        showCheckbox: true,
        multiple: true,
        collapseTags: true
    }

    init(id?: string) {
        this.dialogVisible = true
        this.queryId = id
        this.$nextTick(async () => {
            this.addForm.clear()
            if (id) {
                this.getRoleById(id)
            }
        })
    }

    async getRoleMenu(id: string) {
        const data = await this.menuService.getRoleMenu(id)
        this.addForm.menuIds = data.checkedKeys
    }

    async getRoleById(id: string) {
        const data = await this.roleService.getRoleById(id)
        this.addForm.setForm(data.data)
        this.getRoleMenu(id)
    }

    close() {
        this.dialogVisible = false
    }

    treeCheck(_val, all) {
        this.halfKeys = all.halfCheckedKeys
        this.checkKeys = all.checkedKeys
    }

    // 表单提交
    submit() {
        this.addForm.submit(async (done) => {
            // this.addForm.menuIds = [...this.checkKeys, ...this.halfKeys]
            if (this.queryId) {
                const res = await this.roleService.updateRole(this.addForm)
                if (res.code === 200) {
                    this.$message.success("更新成功")
                    this.dialogVisible = false
                    this.$emit('refresh')
                }
            } else {
                const res = await this.roleService.insertRole(this.addForm)
                if (res.code === 200) {
                    this.$message.success("新增成功")
                    this.dialogVisible = false
                    this.$emit('refresh')
                }
            }
            done()
        })
    }

}
</script>

<style lang="scss" scoped></style>